<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { Avatar } from '@arco-design/web-vue';
  import HomeCard from './components/HomeCard.vue';

  import IconCreatorBg1 from '/@/assets/home/creator_bg_1.svg';
  import IconCreatorBg2 from '/@/assets/home/creator_bg_2.svg';
  import IconCreatorBg3 from '/@/assets/home/creator_bg_3.svg';
  import IconCreatorLeftArrow from '/@/assets/home/creator_left_arrow.svg';
  import IconCreatorRightArrow from '/@/assets/home/creator_right_arrow.svg';
  import ImageCreatorOutBg from '/@/assets/home/creator_out_bg.png';
  import ImageCreatorOutBgPrimary from '/@/assets/home/creator_out_bg_primary.png';
  import ImageLine1 from '/@/assets/home/line_1.png';
  import ImageLine2 from '/@/assets/home/line_2.png';
  import ImageLine3 from '/@/assets/home/line_3.png';
  import ImageIntersect from '/@/assets/home/Intersect.png';

  import { queryHomeUserList } from '/@/api/home';
  import type { UserRecord } from '/@/api/model/homeModel';

  const creatorListRef = ref<UserRecord[]>([]);
  (async () => {
    const data = await queryHomeUserList();
    creatorListRef.value = data;
  })();
  const currentCreatorIndexRef = ref<number>(2);
  function switchCurrentCreator(index) {
    currentCreatorIndexRef.value = Math.max(Math.min(index, creatorListRef.value.length - 3), 2);
  }
  const creatorCardListWrapStyle = computed(() => {
    const style = {
      transform: `translateX(-${250 * (currentCreatorIndexRef.value - 2)}px)`,
    };
    return style;
  });
</script>
<template>
  <HomeCard title="优秀创作者" more="/creators" class="bg-white">
    <div class="h-[640px]">
      <div class="absolute inset-0 overflow-hidden">
        <img :src="ImageLine1" class="absolute left-[-359px] top-[294px] w-[830px] h-[38px]" />
        <img :src="ImageLine2" class="absolute -right-[144px] top-[293px] w-[436px] h-[30px]" />
        <img :src="ImageLine3" class="absolute right-0 top-[211px] w-[585px] h-[30px]" />
        <img :src="IconCreatorBg1" class="absolute left-[160px] top-[137px] w-[240px] h-[240px]" />
        <div class="absolute left-1/2 -ml-[287px] top-0 w-[574px] h-[574px]">
          <img :src="IconCreatorBg2" class="absolute left-0 top-0 w-[574px] h-[574px]" />
          <img
            :src="IconCreatorLeftArrow"
            @click="switchCurrentCreator(currentCreatorIndexRef - 1)"
            class="z-20 absolute left-[108px] top-[280px] w-[38px] h-[62px] cursor-pointer"
          />
          <img
            :src="IconCreatorRightArrow"
            @click="switchCurrentCreator(currentCreatorIndexRef + 1)"
            class="z-20 absolute right-[139px] top-[280px] w-[38px] h-[62px] cursor-pointer"
          />
        </div>
        <img :src="IconCreatorBg3" class="absolute right-[217px] top-[47px] w-[240px] h-[240px]" />
      </div>
      <div class="creatorCardList">
        <div class="creatorCardListWrap" :style="creatorCardListWrapStyle">
          <div
            v-for="(item, index) in creatorListRef"
            :key="item.id"
            class="creatorCard mr-[30px] flex-none"
            :class="{ current: index === currentCreatorIndexRef }"
          >
            <div class="creatorCardWrap">
              <div class="absolute inset-0 bg-white"></div>
              <img class="absolute left-0 top-0 w-full" :src="ImageIntersect" />
              <img
                class="absolute -left-[12px] max-w-[244px] -top-[10px] w-[244px] h-[245px]"
                :src="ImageCreatorOutBg"
              />
              <img
                class="absolute left-0 top-0 w-full h-full"
                v-if="index === currentCreatorIndexRef"
                :src="ImageCreatorOutBgPrimary"
              />
              <div class="creatorCardContent w-full h-full">
                <div
                  class="absolute top-[32px] left-0 flex justify-center items-center w-full text-[12px]"
                >
                  <div class="mt-[35px] text-center w-[36px]">
                    <div>{{ item.focus }}</div>
                    <div>订阅</div>
                  </div>
                  <div class="mx-[20px]">
                    <Avatar class="h-[60px] w-[60px]" :imageUrl="item.icon" />
                    <div class="text-black text-lg text-center mt-[9px]">{{ item.name }}</div>
                  </div>
                  <div class="mt-[35px] text-center w-[36px]">
                    <div>{{ item.follower }}</div>
                    <div>关注者</div>
                  </div>
                </div>
                <div
                  class="text-[12px] leading-[18px] absolute top-[128px] left-1/2 -ml-[65px] w-[130px] pole-line-clamp-3"
                  >{{ item.introduce }}</div
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </HomeCard>
</template>

<style scoped>
  .creatorCardList {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 20px;
    max-width: 1260px;
    top: 350px;
    z-index: 10;
    display: flex;
    height: 380px;
    overflow: hidden;
  }

  .creatorCardListWrap {
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
  }

  .creatorCard {
    width: 220px;
    height: 220px;
    position: relative;
  }

  .creatorCard .creatorCardWrap {
    width: 220px;
    height: 220px;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    border-radius: 9999px;
    background: rgba(171, 187, 226, 0.2);
    box-shadow: 0px 4px 20px 0px #00000040;
  }

  .creatorCard.current {
    z-index: 10;
  }

  .creatorCard.current .creatorCardWrap {
    /* width: 360px;
    height: 360px;
    left: -70px;
    top: -70px; */
    transform: scale(1.5);
  }

  .creatorCard .creatorCardContent {
    /* border: 8px solid;

    border-image-source: conic-gradient(
      from 180deg at 50% 50%,
      #a4b3db 0deg,
      rgba(164, 179, 219, 0) 360deg
    ); */
    /* background: conic-gradient(from 180deg at 50% 50%, #a4b3db 0deg, rgba(164, 179, 219, 0) 360deg),
      linear-gradient(0deg, rgba(171, 187, 226, 0.2), rgba(171, 187, 226, 0.2)); */
  }
</style>
